<template>
  <div class="app-container">
    <!--工具栏-->
    <!--表格渲染-->
    <div class="head-container">
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <div v-if="crud.props.searchToggle">
        <el-input
          v-model="query['product.nameCn']"
          clearable
          placeholder="产品名"
          style="width: 185px;"
          class="filter-item"
          @keyup.enter.native="crud.toQuery"
        />
        <el-select
          v-model="query.depotId"
          filterable
          placeholder="请选择仓库"
          style="width: 185px;"
          class="filter-item"
          clearable
          @change="crud.toQuery"
        >
          <el-option
            v-for="item in depot"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
        <el-select
          v-model="query.stockLogBusinessType"
          filterable
          placeholder="请选择來源"
          style="width: 185px;"
          class="filter-item"
          clearable
          @change="crud.toQuery"
        >
          <el-option
            v-for="item in dict.stockLogBusinessType"
            :key="item.id"
            :label="item.dictValue"
            :value="item.dictKey"
          />
        </el-select>
        <!-- 搜索 -->
        <rrOperation :crud="crud" />
      </div>
      <crudOperation :permission="permission">
        <template #left>
          <el-button
            class="filter-item"
            size="mini"
            type="primary"
            @click="exportLog"
          >导出
          </el-button>
        </template>
      </crudOperation>
      <el-table
        ref="table"
        v-loading="crud.loading"
        :data="crud.data"
        style="width: 100%;"
        stripe
        :cell-style="changeRow"
        @selection-change="crud.selectionChangeHandler"
      >
        <el-table-column
          label="产品名"
          prop="product.nameCn"
          width="300px"
          show-tooltip-when-overflow
        />
        <el-table-column
          label="產品編號"
          prop="product.sku"
        />
        <el-table-column
          label="產品類別"
          prop="product.productCategory.nameCn"
        />

        <el-table-column
          label="變更日期"
          prop="createdAt"
          width="150px"
        />
        <!--        <el-table-column-->
        <!--          label="总库存	"-->
        <!--          prop="changeAfterTotal"-->
        <!--             -->
        <!--        >-->
        <!--          <template slot-scope="scope">-->
        <!--            {{ scope.row.changeBeforeTotal }} <i class="el-icon-right" /> {{ scope.row.changeAfterTotal }}-->
        <!--            <span v-if="scope.row.changeAfterTotal - scope.row.changeBeforeTotal !== 0 ">-->
        <!--              <i-->
        <!--                v-if="scope.row.changeAfterTotal - scope.row.changeBeforeTotal >0 "-->
        <!--                class="el-icon-top"-->
        <!--                style="color: green"-->
        <!--              />-->
        <!--              <i v-else class="el-icon-bottom" style="color: red" /> {{ scope.row.changeCountTotal }}</span>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <!--        <el-table-column
          label="可用库存"

        >
          <template slot-scope="scope">
            {{ scope.row.changeBeforeApply }} <i class="el-icon-right" /> {{ scope.row.changeAfterApply }}
            <i
              v-if="scope.row.changeAfterApply - scope.row.changeBeforeApply > 0 "
              class="el-icon-top"
              style="color: green"
            />
            <i v-else class="el-icon-bottom" style="color: red" /> {{ scope.row.changeCountApply }}
          </template>
        </el-table-column>-->
        <el-table-column
          label="變動數字"
        >
          <template slot-scope="scope">
            {{ scope.row.changeCountApply }}
          </template>
        </el-table-column>
        <!--        <el-table-column-->
        <!--          label="占用库存"-->
        <!--             -->
        <!--        >-->
        <!--          <template slot-scope="scope">-->
        <!--            {{ scope.row.changeBeforeOccupy }} <i class="el-icon-right" /> {{ scope.row.changeAfterOccupy }}-->
        <!--            <i-->
        <!--              v-if="scope.row.changeAfterOccupy - scope.row.changeBeforeOccupy > 0 "-->
        <!--              class="el-icon-top"-->
        <!--              style="color: green"-->
        <!--            />-->
        <!--            <i v-else class="el-icon-bottom" style="color: red" /> {{ scope.row.changeCountOccupy }}-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <el-table-column
          label="備註"

          prop="operateNote"
          width="200px"
          show-tooltip-when-overflow
        />
        <el-table-column
          label="仓库"
          prop="depot.name"
        />
        <el-table-column
          label="來源編號"
          prop="businessNumber"

          style="width: 350px"
        />
        <el-table-column
          label="來源"
          prop="stockLogBusinessType"
        >
          <template slot-scope="scope">
            <el-tag @click="jumpDetailPage(scope.row)">{{ dict.label.stockLogBusinessType[scope.row.stockLogBusinessType] }}</el-tag>
          </template>
        </el-table-column>
        <!--        <el-table-column
          label="操作类型"
          prop="type"
          column-key="type"

          :filters="[{text: '增加', value: '1'}, {text: '减少', value: '0'}, {text: '不变', value: '2'}]"
          :filter-method="filterTypeHandler"
        >
          <template slot-scope="scope">
            <el-tag type="success">{{ dict.label.logOperationType[scope.row.type] }}</el-tag>
          </template>
        </el-table-column>-->
      </el-table>
      <!--分页组件-->
      <pagination />
    </div>
    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="true"
      :visible.sync="adjustmentVisible"
      title="查看調撥詳情"
      width="1000px"
      @close="adjustmentVisible = false"
    >
      <el-form v-if="adjustmentForm.depot" label-width="130px" style="height: 300px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="仓库:">
              {{ adjustmentForm.depot.name }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="入庫單號:">
              {{ adjustmentForm.sourceNo }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="出庫商品名稱:">
              <div>{{ adjustmentForm.inProduct.nameCn }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商品调整前數量:">
              {{ adjustmentForm.adjQuantityBefore }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商品调整數量:">
              {{ adjustmentForm.adjQuantity }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商品调整后數量:">
              {{ adjustmentForm.adjQuantityAfter }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注:">
              <div>{{ adjustmentForm.remark }}</div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="true"
      :visible.sync="transferVisible"
      title="查看調撥詳情"
      width="1200px"
      @close="transferVisible = false"
    >
      <el-form v-if="transferForm.depot" label-width="130px" style="height: 300px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="仓库:">
              {{ transferForm.depot.name }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="入庫單號:">
              {{ transferForm.sourceNo }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="出庫商品名稱:">
              <div>{{ transferForm.outProduct.nameCn }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="出庫商品扣減數量:">
              {{ transferForm.outQuantity }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="轉換公式:">
              <div>{{ transferForm.ratio }}</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="入庫商品:">
              <div>{{ transferForm.outProduct.nameCn }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="入庫數量:">
              {{ transferForm.ratio * transferForm.outQuantity }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="备注:">
              <div>{{ transferForm.remark }}</div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import crudStock from '@/api/wms/stock'
import CRUD, { crud, header, presenter } from '@crud/crud'
import pagination from '@crud/Pagination'
import crudOperation from '@crud/CRUD.operation'
import rrOperation from '@crud/RR.operation'
import { getAll } from '@/api/wms/depot'
import { all } from '@/api/wms/adjustment'
import { transferAll } from '@/api/wms/transfer'
import { downloadFile } from '@/utils'

export default {
  name: 'StockLog',
  components: { pagination, crudOperation, rrOperation },
  mixins: [presenter(), header(), crud()],
  data() {
    return {
      visible: false,
      modelCreatedAt: '', // 时间选择器显示时间
      nameCn: [],
      pic: [],
      tableData: [],
      list: [],
      loading: false,
      vendorOptions: [],
      arrId: [],
      dialogVisible: false,
      adjustmentVisible: false,
      transferVisible: false,
      transferForm: {},
      adjustmentForm: {},
      depot: [],
      permission: {
        add: ['admin', 'stock:add'],
        edit: ['admin', 'stock:edit'],
        del: ['admin', 'stock:del']
      }
    }
  },
  computed: {
    ...mapGetters(['baseApi'])
  },
  dicts: ['logOperationType', 'stockLogBusinessType', 'depotType'],
  cruds() {
    return CRUD({
      title: '库存日志', url: 'stockLog/page', sort: 'id:desc', crudMethod: { ...crudStock },
      optShow: {
        add: false,
        edit: false,
        del: false,
        download: false,
        reset: true
      }
    })
  },
  created() {
    this.getDepot()
  },
  methods: {
    getDepot() {
      getAll({}).then(res => {
        if (res.code === 0) {
          this.depot = res.data
        }
      })
    },
    filterTypeHandler(value, row) {
      return row.type.toString() === value
    },
    jumpDetailPage(row) {
      console.log(row)
      switch (row.stockLogBusinessType) {
        case 0:
          this.$router.push({
            path: '/wms/inBillDetails',
            query: { defaultNumber: row.businessNumber }
          })
          break
        case 1:
          break
        case 2: // 库内调整
          all({ defaultNumber: row.businessNumber }).then(res => {
            if (res.code === 0) {
              this.adjustmentForm = res.data[0]
            }
          })
          this.adjustmentVisible = true
          break
        case 3:
          this.$router.push({
            path: '/oms/order/orderDetails' + row.businessNumber,
            name: 'OrderDetails',
            query: { id: row.businessNumber }})
          break
        case 4:
          this.$router.push({
            path: '/oms/order/orderDetails' + row.businessNumber,
            name: 'OrderDetails',
            query: { id: row.businessNumber }})
          break
        case 5: // 库内调拨
          transferAll({ defaultNumber: row.businessNumber }).then(res => {
            if (res.code === 0) {
              this.transferForm = res.data[0]
            }
          })
          this.transferVisible = true
          break
        case 6:
          break
        case 7:
          break
        case 8:
          this.$router.push(
            { path: '/oms/order/orderDetails' + row.businessNumber,
              name: 'OrderDetails',
              query: { id: row.businessNumber }})
          break
      }
    },
    changeRow({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 8) {
        return { cursor: 'pointer' }
      }
    },
    exportLog() {
      crudStock.exportLog({ ...this.crud.query }).then(res => {
        if (res.code !== undefined && res.code !== 0) {
          this.$notify({
            title: '失敗',
            message: res.message,
            type: 'error'
          })
          return
        }
        downloadFile(res, this.crud.title + '数据', 'xlsx')
      })
    }
  }
}
</script>

<style>
</style>
